<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城-登陆</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div class="nav">
        <a href="www.xiaomi.con" class="nav-logo"></a>
    </div>
    <div class="content">
        <div class="loggin row">
            <div class="loggin-nav ">
                <div class="loggin-nav-content">
                    <span class="active">账号登陆</span>
                    <span>扫码登陆</span>
                </div>
            </div>
           <div class="frame">
                <div class="loggin-content">
                        <form action="">
                            <p><input type="text " placeholder="邮箱/手机号码/小米ID"></p>
                            <p><input type="password" placeholder="密码"></p>
                            <p><input type="submit" value="登陆"></p>
                            <div class="other-loggin-line">
                                <div class="loggin-other-left"> 
                                    <span><a href="#">手机短信登陆/注册</a></span>
                                </div>
                               
                                <div class="loggin-other-right"> 
                                    <span ><a href="#">立即注册</a></span>
                                    <span></span>
                                    <span ><a href="#">忘记密码?</a></span>
                                </div>
                            </div>
                        </form>
                        <div class="loggin-other-such">
                            
                            <fieldset class="other-type">
                                <legend class="other-type-txt">其他登陆方式</legend>
                                <span class="qq"><i></i></span>
                                <span class="weibo"><i></i></span>
                                <span class="pay"><i></i></span>
                                <span class="wechat"><i></i></span>
                                
                            </fieldset>
                        </div>
                        
                    </div>
                    <div class="saoma">
                        <img src="images/erweima.png" alt="">
                        <div class="saoma-hint">
                            <p>使用&nbsp;<span>小米商城APP</span>&nbsp;扫一扫</p>
                            <p>小米手机可打开「设置」&gt;「小米帐号」扫码登录</p>
                        </div>
                    </div>
           </div>

        </div>
    </div>
    <script>
     $(".loggin-nav-content>span").click(function(){
        $(this).addClass("active").siblings().removeClass("active")
        // console.log($(this).index())
        $(".frame>div").eq($(this).index()).show().siblings().hide()
   })
    </script>
</body>
</html>